import React, { useEffect, useRef, useState } from 'react';
import { Card, Tabs, Descriptions, Table, Tag, Dropdown, Space } from 'antd';
import { DownOutlined } from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table';
import SearchTree from '../../tree/search';
import beJob from '../image/在职.png';
import mainJob from '../image/主岗.png';
import partJob from '../image/兼职.png';

const initData: DataNode[] = [
  {
    staffCode: '20400012',
    accountCode: 'caijf15',
    staffType: 1,
    sex: 1,
    staffName: '娘先加',
    staffState: 0,
    email: 'xuanmei1@chinaunicom.cn',
    mobile: '18655156226',
    staffBusinessType: 50,
    hrStaffType: 1143,
    quitDate: null,
  },
];

interface FeatAuthType {
  AppModul: string;
  Events: string;
}

const featAuthColumns: ColumnsType<FeatAuthType> = [
  {
    title: '序号',
    dataIndex: 'index',
    render: (text, rocord, index) => index + 1,
  },
  {
    title: '应用模块',
    dataIndex: 'AppModul',
    align: 'left',
  },
  {
    title: '活动',
    dataIndex: 'Events',
    align: 'left',
    render: (text) => <Tag>{text}</Tag>,
  },
];

const featAuthData: FeatAuthType[] = [
  {
    AppModul: '个人工作台',
    Events: '待办查询',
  },
  {
    AppModul: '个人工作台',
    Events: '提交',
  },
  {
    AppModul: '个人工作台',
    Events: '提交',
  },
  {
    AppModul: '个人工作台',
    Events: '提交',
  },
  {
    AppModul: '个人工作台',
    Events: '提交',
  },
  {
    AppModul: '个人工作台',
    Events: '提交',
  },
  {
    AppModul: '个人工作台',
    Events: '提交',
  },
  {
    AppModul: '个人工作台',
    Events: '提交',
  },
];

interface DataAuthType {
  ControObj: string;
  AuthManaDim: string;
  AuthRad: string;
}

const DataAuthColumns: ColumnsType<DataAuthType> = [
  {
    title: '序号',
    dataIndex: 'index',
    render: (text, rocord, index) => index + 1,
  },
  {
    title: '受控对象',
    dataIndex: 'ControObj',
    align: 'left',
  },
  {
    title: '权限管理维度',
    dataIndex: 'AuthManaDim',
    align: 'left',
  },
  {
    title: '权限范围',
    dataIndex: 'AuthRad',
    align: 'left',
  },
];

const DataAuthData: DataAuthType[] = [
  {
    ControObj: '全部菜单',
    AuthManaDim: '组织',
    AuthRad: '本人岗位任职组织',
  },
  {
    ControObj: '全部菜单',
    AuthManaDim: '合作方类型',
    AuthRad: '供应商',
  },
  {
    ControObj: '合作方变更管理',
    AuthManaDim: '组织',
    AuthRad: '本人',
  },
];

interface FlowAuthType {
  FlowType: string;
  FlowId: string;
  FlowName: string;
  LinkName: string;
  AuthRad: string;
}

const flowAuthColumns: ColumnsType<FlowAuthType> = [
  {
    title: '序号',
    dataIndex: 'index',
    render: (text, rocord, index) => index + 1,
  },
  {
    title: '流程类型',
    dataIndex: 'FlowType',
    align: 'left',
  },
  {
    title: '流程定义编码',
    dataIndex: 'FlowId',
    align: 'left',
  },
  {
    title: '流程定义名称',
    dataIndex: 'FlowName',
    align: 'left',
  },
  {
    title: '环节名称',
    dataIndex: 'LinkName',
    align: 'left',
  },
  {
    title: '权限范围',
    dataIndex: 'AuthRad',
    align: 'left',
    render: (text) => <Tag>{text}</Tag>,
  },
];

const flowAuthData: FlowAuthType[] = [
  {
    FlowType: '供应商',
    FlowId: 'SYSZC',
    FlowName: '供应商注册流程',
    LinkName: '供应商注册初审',
    AuthRad: '提交',
  },
  {
    FlowType: '供应商',
    FlowId: 'SYSBC',
    FlowName: '供应商注册流程',
    LinkName: '供应商注册终审',
    AuthRad: '审批',
  },
];

const getFirstTwoChineseChars = (str: string) => {
  const match = str.match(/^[\u4e00-\u9fa5]{1,2}/);
  return match ? match[0] : '';
};

const SupplierAdm = () => (
  <Descriptions title="角色基本信息">
    <Descriptions.Item
      label="角色编码"
      labelStyle={{ textAlign: 'right', width: '100px' }}
    >
      YS-role01
    </Descriptions.Item>
    <Descriptions.Item
      label="角色名称"
      labelStyle={{ textAlign: 'right', width: '100px' }}
    >
      供应商管理员
    </Descriptions.Item>
    <Descriptions.Item
      label="角色类型"
      labelStyle={{ textAlign: 'right', width: '100px' }}
    >
      管理类
    </Descriptions.Item>
    <Descriptions.Item
      label="角色组"
      labelStyle={{ textAlign: 'right', width: '100px' }}
    >
      角色组名称
    </Descriptions.Item>
    <Descriptions.Item
      label="角色描述"
      labelStyle={{ textAlign: 'right', width: '100px' }}
    >
      负责联通供应商类合作方智理
    </Descriptions.Item>
    <Descriptions.Item
      label="创建人"
      labelStyle={{ textAlign: 'right', width: '100px' }}
    >
      李嘉明
    </Descriptions.Item>
    <Descriptions.Item
      label="修改人"
      labelStyle={{ textAlign: 'right', width: '100px' }}
    >
      李嘉明
    </Descriptions.Item>
    <Descriptions.Item
      label="创建时间"
      labelStyle={{ textAlign: 'right', width: '100px' }}
    >
      2023-11-17 21:09:08
    </Descriptions.Item>
    <Descriptions.Item
      label="修改时间"
      labelStyle={{ textAlign: 'right', width: '100px' }}
    >
      2023-11-17 21:09:08
    </Descriptions.Item>
  </Descriptions>
);

const FeatAuth = () => (
  <div className="featauthwrapper">
    <div className="featauthsearch">
      <SearchTree />
    </div>
    <div className="divider"></div>
    <div className="featauthright">
      <div>待办业务</div>
      <div>
        <Table
          columns={featAuthColumns}
          dataSource={featAuthData}
          bordered
          pagination={{
            total: 30,
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: (total) => `共 ${total} 条`,
          }}
        />
      </div>
    </div>
  </div>
);

const DataAuth = () => (
  <Table
    columns={DataAuthColumns}
    dataSource={DataAuthData}
    bordered
    pagination={false}
  />
);

const FlowAuth = () => (
  <Table
    columns={flowAuthColumns}
    dataSource={flowAuthData}
    bordered
    pagination={false}
  />
);

const dropDownItems: MenuProps['dropDownItems'] = [
  {
    key: '113824173',
    label: '北京市通州区分公司.综合管理部',
    postType: 1,
    icon: <img src={mainJob} />,
  },
  {
    key: '1213824173',
    label: '天津市通州区分公司.综合管理部',
    postType: 1,
    icon: <img src={partJob} />,
  },
];

const PartnerPortalAuth: React.FC<TableListItem> = (props) => {
  const items = [
    {
      label: `供应商管理员`,
      key: '1',
      children: <SupplierAdm />,
    },
    {
      label: `代理商管理员`,
      key: '2',
      children: <SupplierAdm />,
    },
    {
      label: `合作伙伴管理员`,
      key: '3',
      children: <SupplierAdm />,
    },
    {
      label: `回收商管理员`,
      key: '4',
      children: <SupplierAdm />,
    },
  ];

  const authIfo = [
    {
      label: `功能权限`,
      key: '1',
      children: <FeatAuth />,
    },
    {
      label: `数据权限`,
      key: '2',
      children: <DataAuth />,
    },
    {
      label: `流程权限`,
      key: '3',
      children: <FlowAuth />,
    },
  ];

  const onChange = (key: string) => {
    console.log(key);
  };

  return (
    <div style={{ background: 'ececec', height: '100vh', padding: '0 16px' }}>
      <Card
        title="合作方门户权限"
        bordered={false}
        style={{ marginBottom: '8px' }}
      >
        <div className="basInfCon">
          <div className="circle">
            <span className="circleTxt">
              {getFirstTwoChineseChars(initData[0].staffName)}
            </span>
          </div>
          <div className="basCon">
            <div>
              <span style={{ marginBottom: '6px' }}>
                {initData[0].staffName}
                <img
                  src={beJob}
                  style={{ marginLeft: '16px', marginBottom: '8px' }}
                />
                <img
                  src={partJob}
                  style={{ marginLeft: '16px', marginBottom: '8px' }}
                />
                <Dropdown
                  menu={dropDownItems}
                  trigger={['click']}
                  placement="bottom"
                >
                  <a onClick={(e) => e.preventDefault()}>
                    <Space>
                      {initData[0].accountCode}
                      <DownOutlined />
                    </Space>
                  </a>
                </Dropdown>
              </span>
            </div>
            <div>
              <span style={{ marginRight: '16px' }}>
                编码：{initData[0].staffCode}
              </span>
              <span style={{ marginRight: '16px' }}>
                电话：{initData[0].mobile}
              </span>
              <span style={{ marginRight: '16px' }}>
                邮箱：{initData[0].email}
              </span>
            </div>
          </div>
        </div>
        <div>
          <Tabs defaultActiveKey="1" onChange={onChange} items={items} />
        </div>
      </Card>
      <Card title="权限信息" bordered={false}>
        <Tabs onChange={onChange} type="card" items={authIfo} />
      </Card>
    </div>
  );
};

export default PartnerPortalAuth;
